<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
  <script src="lib/jquery.min.js"></script>
</head>
<body>
  <div style="width: 600px;height: 400px"></div>
  <script>
    // 1. 加载四川省地图的矢量数据
    // 2.在 Ajax 的回调函数中注册地图矢量数据， echarts.registerMap('sichuan', 矢量地图数据)
    // 3.配置 geo 的 type 为 'map'， map 为 'sichuan'
    // 4.通过 zoom 调整缩放比例
    // 5.通过 center 调整中心点
    var mCharts = echarts.init(document.querySelector('div'))
    $.get('json/map/sichuan.json', function(ret) {
      console.log(ret)
      echarts.registerMap('sichuan', ret)
      var option = {
        geo: {
          type: 'map',
          map: 'sichuan',
          label: {
            show: true,
          },
          zoom: 1.2,
          center: [105.571331, 30.513311] //遂宁市 这个坐标值可以通过地图矢量数据获取到
        }
      }
      mCharts.setOption(option)
    })
  </script>
</body>
</html>